import React from 'react';
import { connect } from 'dva'
import moment from 'moment'
import Tools from 'utils/tools'

import { ReportList } from 'components/Abstract'
import MyDatePicker from 'components/MyDatePicker'
import Title from 'components/Title'

import { config } from 'utils';
const { scada } = config;
const {
  Token,
  Interval,
  StationIds,
  STypes,
  DTypes,
  SupplyId,
} = scada;

const format = 'YYYY-MM';
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const month = moment(now).format(format);

@connect(({ business }) => ({ ...business }))
class Report extends React.Component {
    List = [
      {
        field: 'waterSupply',
        label: '供水量', unit: 'm³', icon: 'output',
        dataResource: 'SupplyWaterResourceReport',
        server: {
          type: 'business/querySupplyWater', payload: { type: 'Report' }
        },
      },
      {
        field: 'waterSell',
        label: '售水量', unit: 'm³', icon: 'yield',
        dataResource: 'SellWaterResourceReport',
        server: {
          type: 'business/querySellWater', payload: { type: 'Report' }
        },
      },
      { field: 'waterSubtract', label: '产销差', unit: 'm³', icon: 'line', },
      { field: 'waterSubtractRadio', label: '产销差率', unit: '%', icon: 'pay', },
      {
        field: 'paidAmount', label: '已收水费', value: 'copyrate', unit: '元', icon: 'flowmeter',
        other: { zoom: 10000 },
        server: {
          type: 'business/queryIncomingModel', payload: { type: 'Report', ids: "" }
        },
      },
    ]

  constructor(props) {
    super(props);

    this.state = {
      month,
    }
  }

  componentDidMount() {
    this.init()
  }

  init = async () => {
    await this.setDateIndicators()
  }

  // 获取指标
  setDateIndicators = async () => {
    const { List } = this;
    List.map(ele => {
      const { server } = ele;
      if (server) this.queryServer(server);
    })
  }

  queryServer = async (server) => {
    const { month } = this.state;
    const startOfMonth = moment(month).startOf('month');
    const endOfMonth = moment(month).endOf('month');

    let { payload, type } = server;
    // 供水量
    if(type === 'business/querySupplyWater'){
      const { supply } = StationIds;
      Object.assign(payload, {
        Token,
        Interval,
        STypes,
        DTypes,
        Begin: startOfMonth.unix(),
          End: endOfMonth.unix(),
        StationId: supply.join(','),
      })
    // 售水量
    }else{
      Object.assign(payload, {
        startDate: startOfMonth.format('YYYY-MM-DD'),
        endDate: endOfMonth.format('YYYY-MM-DD'),
      })
    }
    await this.props.dispatch(server);
  }

  // change
  handleChange = (data) => {
    console.log(data, 105)
    const lastTime = this.state.month;
    const month = moment(data).format(format)
    if (lastTime === month) {
      return;
    }
    this.setState({
      month
    }, () => {
      this.init()
    })
  }

  // 供水量 - 售水量 - 产销差 - 产销差率 - 已收消费 计算逻辑
  render() {
    const { List, props } = this;

    // 售水累加
    const waterSell = Tools.countSellWater(props.SellWaterResourceReport)
    // 供水量
    const waterSupply = Tools.countSupplyWater(props.SupplyWaterResourceReport)
    // 已收水费
    const paidAmount = Tools.countSumPay(props.IncomingResourceReport);
    // 产销差
    const waterSubtract = waterSupply - waterSell;
    // 产销差率
    const waterSubtractRadio = waterSupply === 0 ? 0 : (waterSubtract / waterSupply * 100).toFixed(2);

    const Resource = { waterSupply, waterSell, waterSubtract, waterSubtractRadio, paidAmount }

  return (<>
    <MyDatePicker
        defaultValue={month}
        format = {format}
        mode = 'month'
        onChange={this.handleChange}
      />
      <Title title={'重点指标监控'} style={{ paddingLeft: '4%', paddingRight: '4%' }}>
      <ReportList
        dataSource={Resource}
        columns={List}
       />
        </Title>
    </>)
  }
}

export default Report;
